// components/Profile.tsx
import { useUserStore, useThemeStore } from "../../stores";
import {
  JSXElementConstructor,
  Key,
  ReactElement,
  ReactNode,
  ReactPortal,
  useEffect,
} from "react";

const Profile = () => {
  // 获取用户数据
  const { users, loading, fetchUsers } = useUserStore();
  // 获取主题状态
  const { theme, toggleTheme } = useThemeStore();
  console.log(theme, "theme");

  useEffect(() => {
    fetchUsers();
  }, []);

  if (loading) return <div>Loading...</div>;
  //   if (error) return <div>{error}</div>;

  return (
    <div style={{ background: theme }}>
      +<button onClick={toggleTheme}>Toggle Theme</button>
      {/* <button onClick={blueTheme}>blue theme</button> */}
      <ul>
        {users.map(
          (user: {
            id: Key | null | undefined;
            name:
              | string
              | number
              | bigint
              | boolean
              | ReactElement<unknown, string | JSXElementConstructor<any>>
              | Iterable<ReactNode>
              | ReactPortal
              | Promise<
                  | string
                  | number
                  | bigint
                  | boolean
                  | ReactPortal
                  | ReactElement<unknown, string | JSXElementConstructor<any>>
                  | Iterable<ReactNode>
                  | null
                  | undefined
                >
              | null
              | undefined;
          }) => (
            <li key={user.id}>{user.name}</li>
          )
        )}
      </ul>
    </div>
  );
};

export default Profile;
